<template>
	<div class="container">
		<el-page-header @back="goBack" content="小程序banner设置"></el-page-header>

        <el-row type="flex" justify="space-between" class="nav-bar e-m-t-45">
			<el-col :span="3">
				<el-button type="primary" icon="el-icon-plus" plain @click="create">新建banner</el-button>
			</el-col>
			<el-col class="text-right">
				
			</el-col>
		</el-row>

        <el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed prop="name" label="">
                <template slot-scope="scope">
                    <el-image :src="fileURL+scope.row.pic" style="height:100px">
                        <!-- <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div> -->
                    </el-image>
                </template>
			</el-table-column>
			<el-table-column prop="order" label="设置序号" width="200">
                <template slot-scope="scope">
                    <div class="e-m-r-30">
                        <el-input placeholder="设置序号" v-model="scope.row.order" class="e-m-r-30" @change="setOrder(scope.row.id,scope.row.order)">
                            <!-- <el-button slot="append" icon="el-icon-edit" size="mini"></el-button> -->
                        </el-input>
                    </div>
                </template>
			</el-table-column>
            <el-table-column label="是否启用" width="200">
				<template slot-scope="scope">
                    <el-switch v-model="scope.row.setState" @change="changeState($event,scope.row.id)"></el-switch>
                </template>
			</el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="edit(scope.row)">设置</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
        <!-- 弹窗设置banner -->
        <el-dialog :title="dialogType == 'add' ? '新建' : '编辑'" :visible.sync="dialogVisible" width="800px">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="入口图">
					<cropper-upload :zoomScale='[750, 555]' :isCropper="true" @getUpload="handleFilesSuccess"
						class="avatar-uploader">
						<img v-if="form.pic" :src="fileURL + form.pic" style="display: block;width:300px;height:222px">
						<div class="avatar-uploader-icon" style="width:300px;height:222px" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">点击上传banner图片</div>
						</div>
					</cropper-upload>

					<div class="tips">建议上传尺寸比例为750*555 </div>
				</el-form-item>
                <el-form-item label="跳转位置">
                    <el-radio-group v-model="form.type">
                        <el-radio-button :label="0">小程序内</el-radio-button>
                        <el-radio-button :label="1">固定链接</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <!-- banner小程序链接跳转 -->
                <el-form-item label="跳转链接" v-if="form.type == 0">
                    <el-radio-group>
                        <el-input v-model="form.url" placeholder="请输入小程序链接，如首页为：/pages/index/index" class="e-w-400"></el-input>
                    </el-radio-group>
                </el-form-item>
                <!-- banner固定链接跳转 -->
                <template v-if="form.type == 1">
                    <el-form-item label="内页展示图">
                        <cropper-upload :isCropper="false" @getUpload="handleInSuccess" class="avatar-uploader">
                            <img v-if="form.pic2" :src="fileURL + form.pic2" style="display: block;height:375px;width:210px">
                            <div class="avatar-uploader-icon" style="height:375px;width:210px" v-else>
                                <div><i class="el-icon-plus"></i></div>
                                <div class="e-font-14">点击上传内页展示图</div>
                            </div>
                        </cropper-upload>
                    </el-form-item>
                    <el-form-item label="是否内页跳转">
                        <el-switch
                            v-model="form.enable"
                            >
                        </el-switch>
                    </el-form-item>
                    <template v-if="form.enable == true">
                        <el-form-item label="内页跳转位置">
                            <el-radio-group v-model="form.type2">
                                <el-radio-button :label="0">小程序内</el-radio-button>
                                <el-radio-button :label="1">固定链接</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="小程序跳转链接" v-if="form.type2 == 0">
                            <el-radio-group>
                                <el-input v-model="form.url2" placeholder="请输入小程序链接，如首页为：/pages/index/index" class="e-w-400"></el-input>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="固定链接" v-if="form.type2 == 1">
                            <el-radio-group>
                                <el-input v-model="form.url2" placeholder="请输入网页链接，如：https://www.baidu.com" class="e-w-400"></el-input>
                            </el-radio-group>
                        </el-form-item>
                    </template>
                </template>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitType('form')">确定</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
    export default {
        layout: 'admin',
        head() {
            return {
                title: '小程序banner设置-' + this.websetting.name
            }
        },
        data() {
            return {
                key: '',
                page: 1,
                pageSize: 10,
                loading: false,
                total: 0,
                tableData: [],
                dialogVisible: false,//编辑新建
                dialogType: 'add',
                form:{
                    pic: "", //banner图
                    url: "", //banner链接
                    type: 1, //banner链接类型，0为小程序，1为外部链接
                    pic2: "", //外部链接内部图
                    enable: false, //是否内页跳转
                    url2: "", //外部链接内部图链接
                    type2: 1, //外部链接内部图链接类型，0为小程序，1为外部链接
                    state: 1, //状态，1关闭，2启用
                },
                rules: {
                    banner: [
                        {required: true, message: '请上传图片'}
                    ],
                },
            }
        },
        mounted() {
            this.getList()
        },
        methods:{
            goBack() {
                this.$router.go(-1)
            },
            pageChange(e) { // 页码切换事件
                this.page = e;
                this.getList()
            },
            handleSizeChange(val) {
                this.page = 1;
                this.pageSize = val;
                this.getList()
            },
            getList(){
                this.$axios.get('/Operator/Banner/List').then((res)=>{
                    console.log(res)
                    res.forEach((item)=>{
                        if(item.state == '已冻结'){
                            item.setState = false
                        }else{
                            item.setState = true
                        }
                    })
                    this.tableData = res
                })
            },
            create() {
                this.dialogType = "add"
                this.form ={
                    pic: "", //banner图
                    url: "", //banner链接
                    type: 0, //banner链接类型，0为小程序，1为外部链接
                    pic2: "", //外部链接内部图
                    enable: false, //是否内页跳转
                    url2: "", //外部链接内部图链接
                    type2: 0, //外部链接内部图链接类型，0为小程序，1为外部链接
                    state: 2, //状态，1关闭，2启用
                },
                this.dialogVisible = true
            },
            edit(row){
                this.dialogType = "edit"
                this.form = {
                    id: row.id,
                    pic: row.pic, //banner图
                    url: row.url, //banner链接
                    type: row.type, //banner链接类型，0为小程序，1为外部链接
                    pic2: row.pic2, //外部链接内部图
                    enable: row.enable, //是否内页跳转
                    url2: row.url2, //外部链接内部图链接
                    type2: row.type2, //外部链接内部图链接类型，0为小程序，1为外部链接
                    state: row.state, //状态，1关闭，2启用
                }
                this.dialogVisible = true

            },
            handleFilesSuccess(res, file) {
                // 上传banner图
                if (file.status === "success") {
                    this.loading = false
                    this.form.pic = res.path
                }
            },
            handleInSuccess(res, file) {
                // 上传内页展示图
                if (file.status === "success") {
                    this.loading = false
                    this.form.pic2 = res.path
                }
            },
            submitType(formName) {
                let api = ''
                let param = {
                    pic: this.form.pic,
                    url: this.form.url,
                    type: this.form.type,
                    pic2: this.form.pic2,
                    url2: this.form.url2,
                    type2: this.form.type2,
                    state: this.form.state,
                    enable: this.form.enable, //是否内页跳转
                }
                if (this.dialogType == 'add') {
                    api = '/Operator/Banner/Create'
                }
                if (this.dialogType == 'edit') {
                    param.id = this.form.id
                    api = '/Operator/Banner/Edit'
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        
                        this.$axios.post(api, param).then((res) => {
                            // this.$message.success(res.msg);
                            this.$message.success("提交成功");

                            this.dialogVisible = false;
                            this.getList()
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            changeState(state,id){
                // 修改使用状态
                console.log(id,state)
                this.$axios.post('/Operator/Banner/SetState',{
                    id:id,
                    type: 1,
                    state: state==true?2:1
                }).then((res)=>{
                    this.$message.success("修改成功");
                    this.getList()
                })
            },
            setOrder(id,index){
                // 修改排序
                this.$axios.post('/Operator/Banner/SetOrder',{
                    "id": id,
                    "index": index
                }).then((res)=>{
                    this.$message.success("修改排序成功");
                })
            },
            del(id) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get('/Operator/Banner/Delete?Id=' + id).then((res) => {
                        this.$message.success(res.msg);
                        this.getList()
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>